<h2>Parameters</h2>
<div class="contents">
<div class="sub2">Tuturial <i>i</i>Scr<i>i</i>ptDes<i>i</i>gn </div>
<div class="sub">Dynamic dimensions</div>
You have seen more on SVG, I have shown you the path, and taught you the group. And hopefully you see the similarity between HTML and SVG to some degree.
(Do not worry too much if you've never seen HTML before though). SVG is basically nothing more but a bunch of tags, all surrounded by those tags or angular bracket or fish hooks,
or whatever the experts call them (&lt;&gt;).<br/>
In case you have been looking at the templates (the jsvg file) you have probably also noted some other strange looking characters like #{} or so. Those characters are by no means
xml. Instead I call them preprocessor directives, a term borrowed from the programmers, but I think it covers the meaning.
They are specially for iScriptDesign so don't try them anywhere else! (Yet. Of course I'm hoping adoption of my approach by the biggies but there is a lot of PR to be done before
it will be official I'm afraid).<br/>
The preprocessor directives will cause the SVG renderer in your browser or Inkscape to fail or produce an error message, so they MUST be processed before 
feeding it to the SVG engine. And iScriptDesign will do that, in fact it is the only thing iScriptDesign can do. iScriptDesign recognizes four types of directives:
<ol>
<li>--{}</li>
<li>#{}</li>
<li>${}$</li>
<li>@{}</li>
</ol>      
The first being the easiest. Just comments for the sake of comments. Whenever iScriptDesign encounters something like 
<pre>
--{ Some very important text
like licenses and disclaimers 
}
</pre> All and inclusive between --{ and } is replaced with nothing. (Watch out with commenting other directives: as their
end token is also an '}' iScriptDesign will look for the first '}' and is not capable (yet) of distinguishing nested brackets).<br/>
The second one is more complicated. #{} will cause the contents to be replaced with the evaluated contents. <br/> 
Evaluated means that javascript (the language your browser speaks) will process the contents. # { Math.sin(angle) * width } will calculate the sin of the angle
multiplied by the value of width. Of course you need to specify the value of width and angle. The remaining 2 directives can be used for that. <br/>
The ${}$ is a pure evaluation directive. It's content is replaced with nothing, but it is evaluated. So here is where you do the initialization or assignment 
of width and angle: ${width = 50;angle=Math.PI/4; }$ will initialize width to the value of 50, and angle with the value of pi/4 radians (45 degrees).
The ; (semicolon) after each statement is a bit cumbersome, but that is javascript. So instead of using 50 anywhere in your SVG you can now use #{width}, or 
when you want to calculate a derivative from width you can use the calculation formula like: #{width + 20}, or #{width * Math.tan(angle)}. The statements in
#{ } do not need an ; however it is not an error if you do include one! <br/>
The last directive is also meant for initialization. @{} does not do any evaluation instead its contents is used  for the placement of input fields in the
floating panel which can be entered by users. The directive has 4 mandatory attributes all preceded by a colon and separated by a comma. 
@{ var:pc_thickness, label:thickness material, defaultvalue:4, size:3 }
<ul>
<li>var: the name of the variable wich can be used in #{} or ${}$ directives.</li>
<li>label: the text appearing to the left of the inputfield in the floating panel</li>
<li>defaultvalue: the default value the field takes before the user entered anything</li>
<li>size: the size of the inputfield</li>

</ul>
Currently it is not possible to use different types of inputfields like sliders or dropdown boxes. <br/>
The different directives are processed sequentially in the following order: 1: --{}, 2: @{}, 3: ${}$, 4: #{}. So you can be sure that variables you're declaring 
in @{} are also ready for 
use in the directive ${}$
<a class="reference" href="http://www.w3schools.com/js/js_howto.asp">javascript tutorial</a>
</div>